                                        <!-- 搜索成员组件 -->

<!-- 传递属性 -->
<!-- imgUrl:图片地址
     title:标题
     positive:副标题
     still:现价
     originalPrice:原价
     personal:好评率
     onlyId:唯一确定身份值
     onlyIndex:唯一位置信息 -->

<!-- 传递方法 -->
<!-- searchItems:传递唯一id值onlyId  唯一位置信息onlyIndex -->

<template>
  <div class="searchItem" @click="searchItem">
    <!-- 头部占位 -->
    <div style="height: 40px; width: 100%; background-color: #ffffff"></div>

    <div class="searchItems">
      <!-- 图片 -->
      <!-- -------------------------------------------------------------------------------- -->
      <div
        class="searchItem-img"
        :style="{ backgroundImage: 'url(' + imgUrl + ')' }"
      ></div>

      <!-- 文字区域 -->
      <!-- -------------------------------------------------------------------------------- -->
      <div class="searchItem-text">
        <!-- 标题 -->
        <div class="searchItem-text-title">{{ title }}</div>

        <!-- 副标题 -->
        <div class="searchItem-text-positive">{{ positive }}</div>

        <!-- 价格 -->
        <div class="searchItem-text-price">
          <!-- 现价 -->
          <div class="searchItem-text-nowPrice">
            {{ still }}<text>元/小时起</text>
          </div>

          <!-- 原价 -->
          <text
            ><del>{{ originalPrice }}元/小时</del></text
          >
        </div>

        <!-- 好评率 -->
        <div class="searchItem-text-good">{{ personal }}%好评率</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //  图片地址
    imgUrl: {
      type: [String],
      default: "",
    },
    //  标题
    title: {
      type: [String],
      default: "",
    },
    //  副标题
    positive: {
      type: [String],
      default: "",
    },
    //  现价
    still: {
      type: [String, Number],
      default: "",
    },
    //  原价
    originalPrice: {
      type: [String, Number],
      default: "",
    },
    //  好评率
    personal: {
      type: [String, Number],
      default: "",
    },
    //  唯一确定身份值
    onlyId: {
      type: [String, Number],
      default: "",
    },
    //  唯一位置信息
    onlyIndex: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    //  组件点击函数
    searchItem() {
      //  使用父组件函数  传递唯一id值onlyId  唯一位置信息onlyIndex
      this.$emit("searchItems", {
        onlyId: this.onlyId,
        onlyIndex: this.onlyIndex,
      });
    },
  },
};
</script>

<style scoped>
/* 搜索成员组件 */
.searchItem {
}
.searchItems {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
}

/*  图片 */
.searchItem-img {
  width: 110px;
  height: 110px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: auto 12px auto 15px;
  /*  border: solid 1px; */
  border-radius: 8px;
  overflow: hidden;
}

/*  文字区域 */
/*  ----------------------------------------------------------------------- */
.searchItem-text {
  width: 225px;
  height: 102px;
  display: flex;
  flex-flow: column;
  /*  border: solid 1px; */
}

/*  标题 */
.searchItem-text-title {
  width: 100%;
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 600;
  color: #333333;
  padding: 0;
  margin-top: -2px;
}

/*  副标题 */
.searchItem-text-positive {
  width: 100%;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #808080;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*  价格 */
.searchItem-text-price {
  width: 100%;
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  display: flex;
  align-items: flex-end;
  color: #ff411f;
  line-height: 18px;
  margin-top: 15px;
}
/*  现价 */
.searchItem-text-nowPrice {
  margin-right: 5px;
}
.searchItem-text-nowPrice text {
  font-size: 12px;
}
/*  原价 */
.searchItem-text-price > text {
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-decoration: line-through;
  color: #808080;
}

/*  好评率 */
/*  ----------------------------------------------------------------------- */
.searchItem-text-good {
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #808080;
  margin-top: 12px;
}
</style>
